		var canvas = document.getElementById("myCanvas")
		var ctx = myCanvas.getContext("2d");		
		canvas.width = document.documentElement.clientWidth;
		Draw();
		function Draw(){				
			ctx.clearRect(0,0,canvas.width,470);			
			//最外层
			ctx.beginPath();
			ctx.strokeStyle = "#000000";
			ctx.lineWidth = 8;
			ctx.strokeRect(0,0,canvas.width,470);
			ctx.stroke();
			ctx.closePath();
			//内层	
			ctx.beginPath();
			ctx.strokeStyle = "#000000";
			ctx.lineWidth = 2;
			ctx.strokeRect(10,10,canvas.width-20,450);
			ctx.stroke();
			ctx.closePath();
			//竖线
			ctx.beginPath();		
			ctx.moveTo(canvas.width/2-25,10);
			ctx.lineTo(canvas.width/2-25,460);
			ctx.moveTo(canvas.width/2+25,10);
			ctx.lineTo(canvas.width/2+25,460);
			ctx.stroke();
			ctx.closePath();			
			//红色横线
			for(var i = 0 ;i < 4 ; i++){
				if (i>0) {
					ctx.beginPath();
					ctx.strokeStyle = "red";
					ctx.lineWidth = 2;
					ctx.moveTo(10,150*i);
					ctx.lineTo(canvas.width/2-25,150*i);
					ctx.moveTo(canvas.width/2+25,150*i);
					ctx.lineTo(canvas.width-10,150*i);
					ctx.stroke();
					ctx.closePath();			
				} else{
					ctx.beginPath();
					ctx.strokeStyle = "red";
					ctx.lineWidth = 2;
					ctx.moveTo(10,20);
					ctx.lineTo(canvas.width/2-25,20);			
					ctx.moveTo(canvas.width/2+25,20);
					ctx.lineTo(canvas.width-10,20);
					ctx.stroke();
					ctx.closePath();
				}
				
			}		
						
			ctx.beginPath();
			
			ctx.fillStyle = "#000000";
			ctx.font = "bold 25px 仿宋";
			ctx.fillText("张",canvas.width/2-12,50);
			ctx.fillText("氏",canvas.width/2-12,80);		
			ctx.fillText("族",canvas.width/2-12,110);		
			ctx.fillText("谱",canvas.width/2-12,140);
			
			
			//第一世
			ctx.strokeStyle = "#999999";
			ctx.strokeRect(canvas.width-62,30,48,110)
			
			ctx.fillStyle = "#000000";
			ctx.fillRect(canvas.width-58,35,40,100)
						
			ctx.fillStyle = "#FFFFFF";
			ctx.font = "30px 仿宋";
			ctx.fillText("第",canvas.width-55,65);
			ctx.fillText("一",canvas.width-55,95);
			ctx.fillText("世",canvas.width-55,125);

			ctx.fillStyle = "#000000";
			ctx.font = "lighter 15px 宋体 ";
			ctx.fillText("始",canvas.width-90,40);
			ctx.fillText("祖",canvas.width-90,60);
			ctx.fillText("张",canvas.width-90,90);
			ctx.fillText("忠",canvas.width-90,110);		
			ctx.fillText("华",canvas.width-90,130);		
			
			ctx.fillText("配",canvas.width-120,40);
			ctx.fillText("李",canvas.width-120,90);
			ctx.fillText("氏",canvas.width-120,110);		
			
			//第二世
			ctx.strokeStyle = "#999999";
			ctx.strokeRect(canvas.width-62,160,48,110)
			
			ctx.fillStyle = "#000000";
			ctx.fillRect(canvas.width-58,165,40,100)
						
			ctx.fillStyle = "#FFFFFF";
			ctx.font = "30px 仿宋";
			ctx.fillText("第",canvas.width-55,195);
			ctx.fillText("二",canvas.width-55,225);
			ctx.fillText("世",canvas.width-55,255);
			
			ctx.fillStyle = "#000000";
			ctx.font = "lighter 15px 宋体 ";
			ctx.fillText("之",canvas.width-90,170);
			ctx.fillText("子",canvas.width-90,190);
			ctx.fillText("张",canvas.width-90,220);
			ctx.fillText("忠",canvas.width-90,240);		
			ctx.fillText("华",canvas.width-90,260);		
			
			ctx.beginPath();
		}
		